<template>
  <section class="real-app">
      <input 
      type="text"
      class="add-input"
      autofocus="autofocus"
      placeholder="接下来要做什么?"
      @keyup.enter="addToDo"
      >
       <Item 
       :todo="todo"
       v-for="todo in filterTodos"
       :key="todo.id"
       @del="deleteTodo"
       />
         
       <Tabs 
       :filter="filter" 
       :todos="todos"
       @toggle="toggleFilter"
       @clearAll="clearAll"
       />
  </section>
</template>

<script>
import Item from './item.vue'
import Tabs from './tabs.vue'
let id =0;
export default {
    data(){
        return{
            todos:[],
            filter:'所有'
        }
    },
    components:{
        Item,
        Tabs
    },
    computed:{
        filterTodos(){
            if(this.filter==='所有'){
                return this.todos
            }
            const completed = this.filter === '未完成'
            return this.todos.filter(todo=>completed===todo.completed)
        }
    },
    methods: {
      addToDo(e){
          this.todos.unshift({
              id:id++,
              content: e.target.value.trim(),
              completed: false
          })
          e.target.value=''
      },
      clearAll(){
          this.todos = this.todos.filter(todo=>!todo.completed)
      },
      deleteTodo(id){
          this.todos.splice(this.todos.findIndex(todo=>todo.id===id),1)
      },
      toggleFilter(state)
      {
          this.filter=state
      }
  }
}
</script>

<style lang="stylus" scoped>
.real-app{
    width 600px
    margin 0 auto 
    box-shadow 0 0 5px #666
}
.add-input{
    position relative
    margin 0
    width 100%
    font-size 24px
    font-family inherit 
    font-weight inherit
    line-height 1.4em
    border  0
    outline  none 
    color inherit 
    padding 6px
    border 1px solid #999
    box-shadow inset 0 -1px 5px 0 rgba(0,0,0,0.2)
    box-sizing border-box
    font-smoothing antialiased 
    padding 16px 16px 16px 60px
    border  none 
    box-shadow 0 -2px 1px rgba(0,0,0,0.03) 
}
</style>
